<template>
  <view>
    <!-- 1.0 头部 - 情况1：已登录 -->
    <view
      v-if="userInfo.nickName"
      class="head"
    >
      <image
        class="head_bg"
        :src="userInfo.avatarUrl"
        mode="aspectFill"
      />
      <image
        class="head_avatar"
        :src="userInfo.avatarUrl"
        mode="aspectFit"
      />
      <text class="head_name">{{userInfo.nickName}}</text>
    </view>
    <!-- 1.0 头部 - 情况2：未登录 -->
    <view
      v-else
      class="head"
    >
      <button
        type="primary"
        open-type="getUserInfo"
        @getuserinfo="getuserinfoHandle"
      >授权登录</button>
    </view>
    <!-- 2.0 订单导航 -->
    <view class="order_nav">
      <view class="order_nav_item">
        <view class="iconfont icon-icon-test"></view>
        <view class="order_nav_item_text">待付款</view>
      </view>
      <view class="order_nav_item">
        <view class="iconfont icon-daishouhuo"></view>
        <view class="order_nav_item_text">待收货</view>
      </view>
      <view class="order_nav_item">
        <view class="iconfont icon-tuihuo"></view>
        <view class="order_nav_item_text">退货/退款</view>
      </view>
      <view class="order_nav_item">
        <view class="iconfont icon-quanbudingdan01"></view>
        <view class="order_nav_item_text">全部订单</view>
      </view>
    </view>
    <view class="divider"></view>
    <!-- 3.0 应用信息 -->
    <view class="app_info">
      <view class="info">
        <view class="iconfont icon-kefu"></view>
        <view class="name">联系客服</view>
        <view class="value">400-618-4000</view>
      </view>
      <navigator
        url="/pagesA/feedback/main"
        class="info"
      >
        <view class="iconfont icon-fankuitianbao"></view>
        <view class="name">意见反馈</view>
        <view class="value"></view>
      </navigator>
      <view class="info">
        <view class="iconfont icon-banben"></view>
        <view class="name">当前版本</view>
        <view class="value">v4.1.1</view>
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <view class="info">
        <view class="iconfont icon-banben"></view>
        <view class="name">当前运行平台</view>
        <view class="value">微信小程序</view>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import { wxLogin } from "@/api";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
  },
  methods: {
    async getuserinfoHandle(e) {
      // console.log(e);
      // 1. 获取用户信息
      const { signature, rawData, iv, encryptedData, userInfo } = e.detail;
      // console.log(signature, rawData, iv, encryptedData, userInfo);
      // 2. 获取登录凭证(验证码)
      // 注意：这里解构赋值的写法比较特别，先控制台自己打印 res 再改写成这样
      // const res = await uni.login();
      // console.log(res);
      const [, { code }] = await uni.login();
      // console.log(code);
      // 注意：后端接口限制了只允许 wxfb52f2d7b2f6123a 这个Appid实现登录，其他 appid 都无效
      // 修改项目的 appid 在 src\manifest.json 文件中修改
      const res = await wxLogin({
        signature,
        rawData,
        iv,
        encryptedData,
        code,
      });
      // 登录成功后
      if (res.data.message) {
        // 把 token 存到本地
        uni.setStorageSync("token", res.data.message.token);
        // 把用户信息存到本地
        uni.setStorageSync("userInfo", userInfo);
        // 用于更新视图
        this.userInfo = userInfo;
        uni.showToast({
          title: "登录成功",
          duration: 1000,
        });
      } else {
        uni.showToast({
          title: "出现错误请重试",
          icon: "none", // 模拟器 error 图标有问题，但是在手机上正常
          duration: 1000,
        });
      }
    },
    makePhoneCallHandle() {
      uni.makePhoneCall({ phoneNumber: "10086" });
    },
  },
};
</script>

<style lang="less">
.head {
  height: 350rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  .head_bg {
    position: absolute;
    z-index: -1;
    // 防止边缘发虚，把图片变大，超出部分隐藏即可
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    // 模糊滤镜
    filter: blur(25rpx);
  }

  .head_avatar {
    width: 172rpx;
    height: 172rpx;
    border-radius: 50%;
  }

  .head_name {
    margin-top: 20rpx;
    font-size: 32rpx;
    color: #fff;
  }
}
.order_nav {
  display: flex;
  margin: 0 12rpx;
  border-radius: 8rpx;
  background-color: #fff;
  justify-content: space-around;
  .order_nav_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14rpx 0;
    .iconfont {
      font-size: 60rpx;
    }
    .order_nav_item_text {
      font-size: 26rpx;
    }
  }
}
.app_info {
  background-color: #fff;
  margin: 20rpx 12rpx;
  font-size: 26rpx;
  color: #434343;
  .iconfont {
    font-size: 45rpx;
  }
  .info {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    padding: 0 40rpx;
    border-bottom: 1rpx solid #ddd;
    .name {
      margin-left: 28rpx;
    }
    .value {
      flex: 1;
      text-align: right;
    }
  }
}
</style>